<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/js/axios.min"></script>
  <script>
    window.onload = async function (){
      await axios.get("/country/findAll").then(resp =>{
        var info = resp.data;
        var str = "";
        info.forEach(n =>{
          str += `<option value="${n.id}">${n.name}</option>`;
        });
        $("countrySelect").innerHTML = str;
      });
      findCity();
    }

    function findCity(){
      //得到国家ID
      let countryId = $("countrySelect").value;
      axios.get("/city/findByCountry",{
        params:{
          countryId
        }
      }).then(resp =>{
        var info = resp.data;
        var str = "";
        info.forEach( n =>{
          str += `<option>${n.name}</option>`;
        });
        $("citySelect").innerHTML = str;
      });
    }

    function $(id){
      return document.getElementById(id);
    }
  </script>
</head>
<body>
<select id="countrySelect" onchange="findCity()"></select>
<select id="citySelect"></select>
</body>
</html>